<template>
  <div class="pocketAi" @click="showPopover = false">
    <van-tabs :style="showFile ? 'z-index: 99999;' : ''" v-model:active="active">
      <van-tab to="/knowledge" name="/knowledge"><template #title>
          <div class="select">
            <span>个人知识库</span>
            <SvgIcon @click="showFile = !showFile" name="下三角" :size="10" />
          </div>

        </template></van-tab>
      <van-tab title="AI文件搜索" name="/search" to="/search"></van-tab>
      <van-tab title="出差报告 " to="/ppt" name="/ppt"></van-tab>
      <van-tab title="博客生成" to="/Blog" name="/Blog"></van-tab>
      <SvgIcon class="setting" name="设置" @click="goSetting" :size="18" />
    </van-tabs>
    <div v-if="showPopover" class="pocketAi-Popover"></div>
    <RouterView ref="View" style="overflow: hidden; overflow-y: auto; height: 100%;" />
    <van-popup v-model:show="showFile" round position="top" :style="{ height: '50%' }">
      <div class="pocketAi-popup">
        <div @click="gomas" class="item">
          <div>
            <span>查看文件</span>
            <span>查看全部已上传的文件</span>
          </div>
          <SvgIcon name="文件" :size="38" />
          <SvgIcon name="放大镜" :size="18" />
        </div>
        <van-uploader :after-read="imgUpload" >

          <div class="item">
            <div>
              <span>上传相册图片</span>
              <span>上传的新的文件</span>
            </div>
            <SvgIcon name="图片" :size="38" />
            <SvgIcon name="上传" :size="24" />

          </div>
        </van-uploader>
        <van-uploader accept="*" :after-read="imgUpload">
          <div class="item">
            <div>
              <span>上传本地文件</span>
              <span>上传的新的文件</span>
            </div>
            <SvgIcon name="文件夹" :size="38" />
            <SvgIcon name="上传" :size="24" />

          </div>
        </van-uploader>
      </div>
    </van-popup>
    <!-- <input @change="uploadFile" type="file" id="fileInput" style="display: none;"> -->
    <van-overlay :show="ShowOverlay" @click="show = false">
      <van-loading color="#1989fa" size="24"
        style="position: absolute;left: 50%;top: 50%; transform: translate(-50%,-50%);">
        上传中...
      </van-loading>
    </van-overlay>
    <van-notify type="success">
      <van-icon name="bell" style="margin-right: 4px;" />
      <span>通知内容</span>
    </van-notify>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { saveFile, uploadImg } from '@/api/index'
import { useRouter, RouterView } from 'vue-router';
import { showNotify } from 'vant';

const router = useRouter()
const show = localStorage.getItem('showPopover')
if (!show) localStorage.setItem('showPopover', true)
const emit = defineEmits(['setting'])
const active = computed(() => {
  return router.currentRoute.value.path
})
const showFile = ref(false)
const showPopover = ref(!show && true)
const fileList = ref([])
const ShowOverlay = ref(false)


// const View = ref(null)
// onMounted(() => {
//   console.log(active.value)
//   active.value = router.currentRoute.value.path
// })
// const openFile = () => {
//   const fileInput = document.getElementById('fileInput');
//   fileInput.click()
// }
const goSetting = () => {
  // emit('setting')
  router.push('/setting')
}
const gomas = () => {
  // http://ts.aipocket-nas.igrsservice.com/#/
  // window.location.href = 'http://ts.aipocket-nas.igrsservice.com/#/'
  router.push('/nas')
}

const imgUpload = async (e) => {
  const formData = new FormData();
  const reader = new FileReader();
  reader.readAsArrayBuffer(e.file); // 读取文件为 ArrayBuffer
  reader.onload = async (loadEvent) => {
    const arrayBuffer = loadEvent.target.result;
    // ArrayBuffer 现在包含了文件的二进制数据
    // 接下来可以将其添加到 FormData 中
    formData.append('file', new Blob([arrayBuffer], { type: e.file.type }));
    formData.append("chunkNumber", 1)
    formData.append("chunkSize", e.file.size)
    formData.append("currentChunkSize", 1048)
    formData.append("totalSize", 1048)
    formData.append("identifier", `1048-${e.file.name.split('.')[1]}`)
    formData.append("filename", e.file.name)
    formData.append("relativePath", e.file.name)
    formData.append("totalChunks", 1)
    formData.append("path", '/data/Personal knowledge')
    try {
      ShowOverlay.value = true
      showFile.value = false
      await uploadImg(formData)
      showNotify({ type: 'success', message: '上传成功' });
    } catch (error) {
      // console.log(error)
      showNotify({ message: '上传失败' });
    } finally {
      ShowOverlay.value = false

    }

  };
}


// const fileUpload = async (e) => {
//   console.log(e)
//   const formData = new FormData();
//   formData.append('file', e.file);
//   showFile.value = false
//   ShowOverlay.value = true
//   try {
//     const { code, msg } = await saveFile(formData)
//     if (code === 200) {
//       showNotify({ type: 'success', message: '上传成功' });

//     } else {
//       showNotify({ type: 'warning', message: msg });

//     }

//   } catch (error) {
//     showNotify({ message: '上传失败' });
//   } finally {
//     ShowOverlay.value = false
//   }

// }
</script>

<style lang="scss" scoped>
.pocketAi {
  height: 100%;
  // background: #F5F5F5;
  padding-top: 50px;

  .select {
    display: flex;
    position: relative;

    .SvgIcon {
      margin-left: 4px;


    }


  }

  .pocketAi-Popover {
    position: absolute;

    &::after {
      position: absolute;
      content: '这里可以查看或下载文件哦～';
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      border-radius: 8px;
      background: #315EFB;
      color: #fff;
      height: 30px;
      width: 180px;
      bottom: -28px;
      left: 50px;
    }

    &::before {
      position: absolute;
      content: '';
      left: 77px;
      top: -12px;
      border: 6px solid #315dfb00;
      border-top-color: #315EFB;
      transform: rotate(180deg);
      z-index: 999999;

    }
  }

  .pocketAi-popup {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: end;
    align-items: center;
    padding-bottom: 20px;
    background: linear-gradient(168deg, #E4F2FF 0.13%, #CAE5FF 4.97%, #F1F5FE 23.8%);

    .item {
      width: 320px;
      height: 64px;
      display: flex;
      border-radius: 8px;
      background: #F5F5F5;
      margin-bottom: 20px;
      align-items: center;
      justify-content: space-between;
      position: relative;
      padding: 20px;

      &:nth-child(1) {
        border-radius: 12px;
        background: linear-gradient(95deg, #E1E4FF 0%, #E4E7FF 46.31%, #E1E4FF 79.66%);
      }

      &:nth-child(2) {
        border-radius: 12px;
        background: linear-gradient(94deg, rgba(219, 245, 255, 0.85) 0%, #D0F2FF 51.82%, #CBF0FF 93.25%);
      }

      &:nth-child(3) {
        border-radius: 12px;
        background: linear-gradient(94deg, #E3F1FF 0%, #DFF0FF 51.82%, #DAEDFF 93.25%);
      }

      .SvgIcon {
        color: #fff;

        &:nth-child(3) {
          position: absolute;
          right: 10px;
          bottom: 10px;
        }
      }

      div {
        display: flex;
        flex-direction: column;

        span {
          &:nth-child(1) {
            font-size: 16px;
            font-weight: 600;
          }

          &:nth-child(2) {
            color: #999;
            font-size: 12px;
          }
        }
      }
    }

  }
}



:deep(.van-tabs) {
  padding-top: 6px;
  position: fixed;
  width: 100%;
  top: 0;

  .van-popover__wrapper {
    display: flex;
    align-items: center;
  }

  .van-tabs__wrap {

    width: 340px;
    padding-left: 10px;

    .van-tabs__nav {
      background-color: transparent;

      .van-tab {
        padding: 0;
      }
    }


    .van-tab__text {
      font-size: 12px;
    }

    .van-tabs__line {
      bottom: 24px;
    }
  }

  .setting {
    position: absolute;
    right: 16px;
    top: 16px;
  }


}
</style>
